<!-- #layout name=default -->
<style>
  .form-builder-container > .form-group {
    padding: 15px 20px 20px;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: 0.3s all;
    position: relative;
  }

  .form-builder-container > .form-group.editing,
  .form-builder-container > .form-group:hover {
    border: 1px dashed rgba(0, 0, 0, 0.13);
    background: rgba(255, 255, 255, 0.5);
  }

  .form-builder-container > .form-group span.sortable {
    position: absolute;
    cursor: move;
    left: 0;
    top: 50%;
    margin-top: -17px;
    display: none;
  }

  .form-builder-container > .form-group.editing span.sortable {
    display: none !important;
  }

  .form-builder-container > .form-group:hover span.sortable {
    display: inline-block;
  }

  .form-builder-container > .form-group img {
    max-width: 100%;
  }

  .form-builder-container .config-panel {
    margin-bottom: 0;
  }

  .form-builder-field {
    pointer-events: none;
  }

  .form-builder-container button.close {
    position: absolute;
    top: 3px;
    right: 4px;
    display: none;
  }

  .form-builder-container > .form-group.editing button.close {
    display: none !important;
  }

  .form-builder-container > .form-group:hover button.close {
    display: block;
  }
</style>
<div id="main" class="fixed" v-cloak>
  <div class="page-header">
    <kb-form
      v-if="isNewForm"
      ref="nameForm"
      simple
      :rules="rules"
      :model="model"
    >
      <h1 class="title pull-left">{{ Kooboo.text.common.Form + ': ' }}</h1>
      <kb-form-item class="form-group pull-left" prop="name" v-slot="error">
        <div :class="{'has-error': !!error.error}">
          <input
            type="text"
            v-model="model.name"
            placeholder="Name"
            class="form-control input-medium"
            v-kb-tooltip:right.manual.error="error.error"
          />
        </div>
      </kb-form-item>
    </kb-form>
    <h1 v-else class="title pull-left">
      <span>{{ Kooboo.text.common.Form + ': ' }}</span>
      <strong :title="model.name">{{ model.name }}</strong>
    </h1>
  </div>

  <div class="block-fullpage with-buttons">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12">
          <div class="wizard" style="margin-top: 40px;">
            <div style="overflow: hidden;">
              <div class="wrapper" style="min-width: 600px;">
                <a
                  v-for="($data, $index) in steps"
                  :key="$index"
                  href="javascript:;"
                  :class="{ active: $data.value == curStep }"
                  @click="changeStep($data)"
                >
                  {{ $data.displayName }}
                  <b></b>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="container-fluid"
      v-if="fields.length == 0 && curStep == 'field'"
    >
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12">
          <div class="jumbotron kb-hint">
            <h2>Form</h2>
            <!-- prettier-ignore -->
            <p
              >Click the "New field" below to create first field for your form or click the "New content form" to create a form for your content folder.</p
            >
            <p>
              <a class="btn blue" href="javascript:;" @click="onCreateField"
                >New field</a
              >
              <a
                class="btn blue"
                href="javascript:;"
                @click="onCreateContentForm"
                >New content form</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <div
      class="container-fluid"
      v-show="fields.length !== 0 && curStep == 'field'"
      style="margin-bottom: 100px;"
    >
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12">
          <div
            class="jumbotron margin-bottom-20 form-builder-container"
            v-kb-sortable="fields"
            style="background: #f8f8f8;border: 1px solid #ddd;border-radius: 2px;padding: 18px 30px;"
          >
            <div
              v-for="(field, fieldIndex) in fields"
              :key="fieldIndex"
              class="form-group"
              :class="{ editing: field.configuring }"
            >
              <span class="sortable">
                <i class="glyphicon glyphicon-list"></i>
              </span>
              <button
                class="close"
                @click="onRemoveField(fieldIndex)"
                v-kb-tooltip="Kooboo.text.common.remove"
                ><i class="fa fa-close"></i
              ></button>

              <div @click.prevent="onEditField(field)" style="cursor: pointer;">
                <label
                  v-if="field.label && field.type !== 'SubmitAndReset'"
                  class="control-label"
                  >{{ field.label }}</label
                >
                <input
                  v-if=" field.type == 'TextBox'"
                  type="text"
                  class="form-control form-builder-field"
                  :placeholder="field.placeholder"
                  :name="field.name"
                />
                <textarea
                  v-else-if="field.type == 'TextArea'"
                  type="text"
                  class="form-control form-builder-field"
                  :placeholder="field.placeholder"
                ></textarea>
                <div v-else-if="field.type == 'CheckBox'">
                  <template v-if="field.model.options.length">
                    <label
                      class="checkbox-inline form-builder-field"
                      v-for="(option,index) in field.model.options"
                      :key="index"
                    >
                      <input
                        type="checkbox"
                        :value="option.value"
                        v-model="field.value"
                      />
                      {{ option.key }}
                    </label>
                  </template>
                  <p v-else class="form-control-static"
                    >Adding your options by using the add button below.</p
                  >
                </div>

                <div v-else-if="field.type == 'RadioBox'">
                  <template v-if="field.model.options.length">
                    <label
                      class="radio-inline form-builder-field"
                      v-for="(option,index) in field.model.options"
                      :key="index"
                    >
                      <input type="radio" v-model="field.value" />
                      {{ option.key }}
                    </label>
                  </template>
                  <p v-else class="form-control-static"
                    >Adding your options by using the add button below.</p
                  >
                </div>

                <select
                  v-else-if="field.type == 'Selection'"
                  class="form-control form-builder-field"
                >
                  <option
                    v-for="(option,index) in field.model.options"
                    :value="option.value"
                    >{{ option.key }}</option
                  >
                </select>

                <p
                  v-else-if="field.type == 'PlainText'"
                  class="form-control-static form-builder-field"
                  >{{ field.placeholder }}</p
                >

                <hr v-else-if="field.type == 'Divider'" class="control-hr" />

                <input
                  v-else-if="field.type == 'Password'"
                  type="password"
                  class="form-control form-builder-field"
                  :placeholder="field.placeholder"
                />

                <input
                  v-else-if="field.type == 'Email'"
                  type="email"
                  class="form-control form-builder-field"
                  :placeholder="field.placeholder"
                />

                <input
                  v-else-if="field.type == 'Number'"
                  type="number"
                  class="form-control form-builder-field"
                  :placeholder="field.placeholder"
                />

                <button
                  v-else-if="field.type == 'Submit'"
                  type="submit"
                  class="btn blue form-control form-builder-field"
                  >{{ field.placeholder }}</button
                >

                <button
                  v-else-if="field.type == 'Reset'"
                  type="reset"
                  class="btn btn-default form-control form-builder-field"
                  >{{ field.placeholder }}</button
                >
                <div v-else-if="field.type == 'SubmitAndReset'" class="row">
                  <div class="col-md-6">
                    <button
                      type="submit"
                      class="btn blue form-control form-builder-field"
                      >{{ field.label }}</button
                    >
                  </div>
                  <div class="col-md-6">
                    <button
                      type="reset"
                      class="btn btn-default form-control form-builder-field"
                      >{{ field.placeholder }}</button
                    >
                  </div>
                </div>
              </div>

              <!-- Configure Area -->
              <div
                class="form-group margin-top-20"
                v-kb-collapsein="field.configuring"
              >
                <div class="panel panel-default config-panel">
                  <div class="panel-body">
                    <div
                      class="row"
                      style="margin-top: -16px; margin-left: -16px; margin-right: -16px;"
                    >
                      <ul class="nav nav-tabs nav-justified">
                        <li
                          v-for="(item, index) in field.tabs"
                          :key="index"
                          :class="{ active: item.value == field.curTab }"
                        >
                          <a
                            @click="switchTab(field, item.value)"
                            href="javascript:;"
                            >{{ item.displayName }}</a
                          >
                        </li>
                      </ul>
                    </div>
                    <div class="form-group">
                      <div class="tab-content">
                        <!-- basic form -->
                        <kb-form
                          simple
                          ref="basicForm"
                          class="tab-pane"
                          :class="{ active: field.curTab == 'basic' }"
                          :model="field.model"
                          :rules="field.rules"
                          :error-visible="field.showError"
                        >
                          <div class="form-group">
                            <div class="row">
                              <div class="col-md-12 margin-bottom-10">
                                <label class="control-label">Type</label>
                                <select
                                  class="form-control"
                                  v-model="field.type"
                                  @change="changeFieldType(field, fieldIndex)"
                                >
                                  <option
                                    v-for="(option,index) in fieldTypes"
                                    :value="option.value"
                                  >
                                    {{option.displayName}}
                                  </option>
                                </select>
                              </div>
                              <div
                                v-if="['divider','plaintext','submit','reset','submitandreset'].indexOf(field.type.toLowerCase()) == -1"
                                :class="field.isPlaceholderRequired ? 'col-md-4': 'col-md-6'"
                              >
                                <kb-form-item prop="name" v-slot="error">
                                  <div
                                    class="form-group"
                                    :class="[{'has-error': !!error.error}, 'name-error-container' + fieldIndex]"
                                  >
                                    <label class="control-label">name</label>
                                    <input
                                      type="text"
                                      class="form-control"
                                      v-model="field.model.name"
                                      :disabled="field.nameUnchangable"
                                      :class="{ disabled: field.nameUnchangable }"
                                      v-kb-tooltip:left.manual.error="error.error"
                                      :data-container="'.name-error-container' + fieldIndex"
                                    />
                                  </div>
                                </kb-form-item>
                              </div>
                              <div
                                :class="field.isPlaceholderRequired ? 'col-md-4': 'col-md-6'"
                              >
                                <div class="form-group">
                                  <label class="control-label"
                                    >{{ field.type == 'SubmitAndReset' ?
                                    Kooboo.text.site.form.submit :
                                    Kooboo.text.common.Label }}</label
                                  >

                                  <input
                                    type="text"
                                    class="form-control"
                                    v-model="field.label"
                                  />
                                </div>
                              </div>
                              <div
                                class="col-md-4"
                                v-if="field.isPlaceholderRequired"
                              >
                                <div class="form-group">
                                  <label class="control-label"
                                    >{{ field.type == 'SubmitAndReset' ?
                                    Kooboo.text.site.form.reset :
                                    Kooboo.text.common.placeholder }}</label
                                  >

                                  <input
                                    type="text"
                                    class="form-control"
                                    v-model="field.placeholder"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                          <kb-form-item prop="options" v-slot="error">
                            <div
                              class="form-group options-error-container"
                              v-if="field.needOptions"
                              :class="{'has-error': !!error.error }"
                              :id="'options-error-container-' + fieldIndex"
                            >
                              <label
                                class="control-label"
                                v-kb-tooltip:left.manual.error="error.error"
                                :data-container="'#options-error-container-' + fieldIndex"
                                >Options</label
                              >
                              <div>
                                <div class="input-groups">
                                  <div
                                    v-for="(option,index) in field.model.options"
                                    :key="index"
                                    class="input-group"
                                    :id="'input-group-' + index + fieldIndex"
                                    :class="{ 'has-error': field.optionRowErrors[index] && (field.optionRowErrors[index].key || field.optionRowErrors[index].value )}"
                                  >
                                    <kb-form-item
                                      :prop="'options['+ index +'].key'"
                                      v-slot="error"
                                    >
                                      <input
                                        type="text"
                                        class="form-control key input-medium"
                                        placeholder="Display"
                                        v-model="field.model.options[index].key"
                                        v-kb-tooltip:left.manual.error="error.error"
                                        :data-container="'#input-group-' + index + fieldIndex"
                                      />
                                      <slot-bridge
                                        :errors="field.optionRowErrors"
                                        :index="index"
                                        prop="key"
                                        :error="error.error"
                                      ></slot-bridge>
                                    </kb-form-item>
                                    <span class="input-group-addon">:</span>
                                    <kb-form-item
                                      :prop="'options['+ index +'].value'"
                                      v-slot="error"
                                    >
                                      <input
                                        type="text"
                                        class="form-control value input-medium"
                                        placeholder="Value"
                                        v-model="field.model.options[index].value"
                                        v-kb-tooltip:top.manual.error="error.error"
                                        :data-container="'#input-group-' + index + fieldIndex"
                                      />
                                      <slot-bridge
                                        :errors="field.optionRowErrors"
                                        :index="index"
                                        prop="value"
                                        :error="error.error"
                                      ></slot-bridge>
                                    </kb-form-item>
                                    <span class="input-group-btn"
                                      ><a
                                        class="btn btn-default"
                                        href="javascript:;"
                                        @click="removeOption(field, index)"
                                        ><i class="fa fa-minus"></i></a
                                    ></span>
                                  </div>
                                </div>
                                <div>
                                  <a
                                    class="btn dark"
                                    href="javascript:;"
                                    @click="addOption(field)"
                                    :disabled="!isAbleToAddOption(field)"
                                    ><i class="fa fa-plus"></i
                                  ></a>
                                </div>
                              </div>
                            </div>
                          </kb-form-item>
                        </kb-form>
                        <!-- /basic form -->
                        <!-- validation form -->
                        <div
                          class="tab-pane"
                          :class="{ active: field.curTab == 'validation' }"
                        >
                          <div class="form-group">
                            <label
                              >{{
                              Kooboo.text.component.fieldEditor.selectValidationRules
                              }}</label
                            >
                            <div class="row">
                              <div class="col-md-9">
                                <select
                                  class="form-control"
                                  v-model="field.validateType"
                                >
                                  <option
                                    v-for="option in field.avaliableRules"
                                    :value="option.value"
                                  >
                                    {{ option.displayName }}
                                  </option>
                                </select>
                              </div>
                              <div class="col-md-3">
                                <a
                                  class="btn btn-block blue"
                                  href="javascript:;"
                                  @click="addValidation(field)"
                                  :class="{ disabled: field.avaliableRules.length == 0 }"
                                  >{{ Kooboo.text.common.add }}</a
                                >
                              </div>
                            </div>
                          </div>
                          <form-validator
                            v-if="field.validations.length"
                            ref="formValidator"
                            :validations="field.validations"
                            :field-index="fieldIndex"
                            @remove="removeValidation(field, $event)"
                            :error-visible="field.showError"
                          ></form-validator>
                        </div>
                        <!-- /validation form -->
                      </div>
                    </div>
                  </div>
                  <div class="panel-footer clearfix">
                    <div class="pull-right">
                      <a
                        href="javascript:;"
                        class="btn green"
                        @click="onSaveField(field, fieldIndex)"
                        >Save</a
                      >
                      <a
                        href="javascript:;"
                        class="btn btn-default"
                        @click="onFieldCancel(field, fieldIndex)"
                        >Cancel</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a
            href="javascript:;"
            class="btn btn-block blue margin-bottom-20"
            @click="onCreateField"
            :disabled="!isAbleToAddNewField()"
            :class="{ disabled: !isAbleToAddNewField() }"
            ><i class="fa fa-plus"></i> <span>New field</span></a
          >
        </div>
      </div>
    </div>

    <div class="container-fluid" v-show="curStep == 'style'">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-md-6">
              <kb-code-editor
                ref="editor"
                :auto-size="true"
                :code.sync="styleContent"
                style="max-height:800px; height: 500px;"
                lang="css"
              ></kb-code-editor>
            </div>
            <div class="col-md-6">
              <iframe
                src="about:blank"
                frameborder="0"
                id="preview"
                style="max-width: 100%; width: 100%; max-height: 500px;"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid" v-show="curStep == 'setting'">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12">
          <div class="form-horizontal" style="margin-bottom: 100px;">
            <div class="form-group">
              <label class="control-label col-md-3">Submit method</label>
              <div class="col-md-9">
                <div class="row">
                  <div class="col-md-4">
                    <label class="radio-inline">
                      <input
                        type="radio"
                        value="get"
                        name="method"
                        v-model="method"
                      />Get
                    </label>
                    <label class="radio-inline">
                      <input
                        type="radio"
                        value="post"
                        name="method"
                        v-model="method"
                      />Post
                    </label>
                  </div>
                  <div class="col-md-8">
                    <label class="radio-inline">
                      <input
                        type="checkbox"
                        v-model="allowAjax"
                        style="margin-right: 10px"
                      />Use AJAX
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group" v-kb-collapsein="allowAjax">
              <label class="control-label col-md-3">Success callback</label>
              <div class="col-md-9">
                <textarea
                  v-model="successCallback"
                  class="form-control"
                  placeholder="res"
                ></textarea>
              </div>
            </div>

            <div class="form-group" v-kb-collapsein="allowAjax">
              <label class="control-label col-md-3">Failed callback</label>
              <div class="col-md-9">
                <textarea
                  v-model="failedCallback"
                  class="form-control"
                ></textarea>
              </div>
            </div>

            <div class="form-group" v-show="!allowAjax">
              <label class="control-label col-md-3">Redirect to</label>
              <div class="col-md-9">
                <select
                  class="form-control"
                  v-model="redirect"
                  :class="{ 'margin-bottom-10': showExternalLinkInput }"
                >
                  <option
                    v-for="(item,index) in linkList"
                    :value="item.path"
                    :key="item.path"
                  >
                    {{ item.name }}
                  </option>
                </select>
                <input
                  type="text"
                  v-show="showExternalLinkInput"
                  v-model="externalLink"
                  class="form-control"
                  placeholder="External link address"
                />
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3">Submit location</label>
              <div class="col-md-9">
                <select v-model="formSubmitter" class="form-control">
                  <option
                    v-for="(item,index) in availableSubmitters"
                    :value="item.name"
                    :key="index"
                  >
                    {{ item.name }}
                  </option>
                </select>
              </div>
            </div>

            <div class="form-group" v-show="choosedFolderName">
              <label class="control-label col-md-3">Submit to</label>
              <div class="col-md-9">
                <p class="form-control-static">
                  <span>Content folder</span> -
                  <span>{{ choosedFolderName }}</span>
                </p>
              </div>
            </div>
            <div class="form-group" v-if="settings && settings.length">
              <label class="control-label col-md-3">Setting</label>
              <div class="col-md-9">
                <div class="col-md-12">
                  <div
                    class="form-group"
                    v-for="($data, $index) in settings"
                    :key="$index"
                  >
                    <label class="control-label"
                      >{{ $data.name &&
                      Kooboo.text.component.table[$data.name.toLowerCase()] }}
                    </label>
                    <select
                      v-if="$data.controlType == 'Selection'"
                      v-model="$data.defaultValue"
                      class="form-control"
                    >
                      <option
                        v-for="(item,index) in $data.selectionValues"
                        :value="item.key"
                        :key="index"
                      >
                        {{ item.value }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-kb-modal="showContentFolderSelector"
      class="modal fade"
      data-backdrop="static"
      data-keyboard="false"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" @click="onHideContentFolderSelector"
              ><i class="fa fa-close"></i
            ></button>
            <h4 class="modal-title">Choose content folder</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal">
              <div class="form-group">
                <label class="control-label col-md-3">Content folder</label>
                <div class="col-md-9">
                  <select class="form-control" v-model="choosedFolder">
                    <option
                      v-for="item in contentFolders"
                      :value="item.id"
                      :key="item.id"
                    >
                      {{item.name}}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <a
              href="javascript:;"
              class="btn green"
              :disabled="!choosedFolder"
              @click="onChooseContentFolder"
              >Choose</a
            >
            <a
              href="javascript:;"
              class="btn gray"
              @click="onHideContentFolderSelector"
              >Cancel</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-buttons">
    <div class="btn-group dropup">
      <button @click="onSaveAndReturn" class="btn green" style="margin:0;"
        >Save & Return</button
      >
      <a
        class="btn green dropdown-toggle"
        data-toggle="dropdown"
        style="margin:0;min-width:auto;"
        ><i class="fa fa-angle-up"></i
      ></a>
      <ul class="dropdown-menu" role="menu">
        <li><a @click="onSave" href="javascript:;">Save</a></li>
      </ul>
    </div>
    <a href="javascript:;" class="btn gray" @click="onBack">Cancel</a>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/jquery-ui-customized.js",
      "/_Admin/Scripts/formEditor/formValidator.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/components/kb-code-editor.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Development/KooForm.js"></script>
